<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<title>报名/预约</title>
	
	 <!-- jQuery -->
	<script src="../libs_js/jquery-2.1.1.js" ></script>
	
	<!-- bootstrap -->
	<link rel="stylesheet" href="../libs_jscss/bootstrap-3.2.0-dist/css/bootstrap.css">
	<script src="../libs_jscss/bootstrap-3.2.0-dist/js/bootstrap.js" ></script>
	
	<!-- artTemplate 模板引擎 -->
	<script src="../libs_js/artTemplate/template.js"></script>

</head>

<body>

<!-- Modal -->
<div class="modal fade" id="modal_create_issue" tabindex="-1" role="dialog"
	aria-labelledby="label_modal_create_issue"
	aria-hidden="true"
	data-backdrop="static"
	>
	
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
					
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">x</button> <!-- 关闭按钮 -->
				
				<h4 class="modal-title" id="label_modal_create_issue">
					新建预约主题</h4>
			</div>
			
			<div class="modal-body">

				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-2 control-label">标题</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="name"
								placeholder="">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">描述</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="desc"
								placeholder="">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">创建者邮箱</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="creator"
								placeholder="">
						</div>
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="button"  onclick="CreateNewSubmit();" class="btn btn-default">确定</button>
						</div>
					</div>
				</form>
				
			</div>
			
		</div>
	</div>
</div>
	<div id="issues_container"></div>
	<script id="issues" type="text/html">
		<%
			var issues = data.issues;
		%>

		<h3>预约主题列表 <button class="btn btn-default" onclick="CreateNew();">创建新预约主题</button></h3>
		<ul>
			<% for(var i=0; i<issues.length; ++i) { %>
				<li><a href="appointment.html?issue_id=<%=issues[i].issue_id%>" ><%=issues[i].s_name%><a></li>
			<% } %>
		</ul>
	</script>
	
	<br /><br /><br />
	<p>发现 BUG 请反馈 roxma@qq.com，谢谢</p>
</body>

<script>

jQuery(function(){
	
	jQuery.ajax({
		  url: "cgi_get_issue_list.php"
		, error: function(){
			alert("可能是网络原因，页面加载失败");
		}
		, success: function(response){
			if(response.error_code!=0){
				if(response.error_message==""){
					alert("系统异常，请联系管理员");
					return;
				}else{
					alert("系统异常：" + response.error_message);
					return;
				}
			}
			
			var html = template.render('issues', response);
			jQuery("#issues_container").html(html);
		}
	});
});

function CreateNew(){
	jQuery("#modal_create_issue").modal("show");
}
function CreateNewSubmit(){
	var modal = jQuery("#modal_create_issue");
	var data = {
			  name: modal.find("input[name=name]").val()
			, desc: modal.find("input[name=desc]").val()
			, creator: modal.find("input[name=creator]").val()
	};
	
	jQuery.ajax({
		  url: "cgi_create_issue.php"
		, data: data 
		, error: function(){
			alert("可能是网络原因，操作失败");
		}
		, success: function(response){
			if(response.error_code!=0){
				if(response.error_message==""){
					alert("系统异常，请联系管理员");
					return;
				}else{
					alert("系统异常：" + response.error_message);
					return;
				}
			}
			
			window.location.reload();
		}
	});
	
	return;
}

</script>

</html>